<template>
	<view id="app">
		<view class="container fdc">
			<view class="df fdc bgw mb20">
				<view class="c000 ptb15 f28">预约施工工匠</view>
				<view class="df w100p aic plr15 bdb1s brcce pb20">
					<view class="w220 h340 mb20">
						<image :src="cart.avatar" class="w220 h340" mode="aspectFill"></image>
					</view>
					<view class="f1 df fdc mb20">
						<view class="c000 f30 fw8 ptb20">马师傅</view>
						<view class="c999 f28 ptb20">匠徕徕·更靠谱的铺贴师傅平台</view>
					</view>
				</view>
			</view>
			<view class="df fdc bgw">
				<view class="c000 ptb15 f28">预约信息</view>
				<view class="rows  ptb20 bdb1s brcce">
					<view class="w150 f28 c666 pl20">预约日期</view>
						<view class="f1" @click="openDate">
							<uv-input placeholder="请选择日期" disabled disabledColor="#fff" border="none" v-model="dateTxt" suffixIcon="arrow-right" ></uv-input>
						</view>
				</view>
				<view class="rows ptb20 bdb1s brcce">
					<view class="w150 f28 c666 pl20">联系人</view>
					<view class="f1">
						<uv-input placeholder="输入联系人" border="none" v-model="address.name"></uv-input>
					</view>
				</view>
				<view class="rows ptb20 bdb1s brcce">
					<view class="w150 f28 c666 pl20">联系方式</view>
					<view class="f1">
						<uv-input placeholder="输入手机号" border="none" v-model="address.phone"></uv-input>
					</view>
				</view>
				<view class="rows ptb20 bdb1s brcce">
					<view class="w150 f28 c666 pl20">所在地区</view>
					<view class="f1" @click="openaddress">
						<uv-input placeholder="请选择地址" disabled disabledColor="#fff" border="none" v-model="addressTxt" suffixIcon="arrow-right" ></uv-input>
					</view>
				</view>
				<view class="rows ptb20 bdb1s brcce">
					<view class="w150 f28 c666 pl20">详细地址</view>
					<view class="f1">
						<uv-input placeholder="输入地址" border="none" v-model="address.name"></uv-input>
					</view>
				</view>
				<view class="c666 ptb15 f28">备注信息</view>
				<uv-textarea v-model="remark" count maxlength="300" placeholder="请输入内容"></uv-textarea>
			</view>
		</view>
		<uv-calendars ref="calendars" color="#FFAC3E" @confirm="confirmDate" />
		<uv-picker ref="address" :columns="addressList" keyName="name" @change="changeRegion" @confirm="addressconfirm"></uv-picker>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				cart:{},
				address:{},
				dateTxt:"",
				addressTxt:"",
				remark:"",
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue:[0,0,0],
				defaultValue: [110000, 110100, 110101],
			}
		},
		onLoad(){
			that = this;
			this.getRegion();
			let cart = uni.getStorageSync('QLXG_cart');
			console.log(cart);
			this.cart = JSON.parse(cart);
			console.log(this.cart);
		},
		methods: {
			getRegion:function(){
				let that = this;
				this.request({
					url: '/api/index/region'
				}).then((res)=>{
					if(res.code == 200){
						this.provinces = res.data.sort((left, right) => (Number(left.id) > Number(right.id) ? 1 : -1));
						console.log(this.provinces);
						this.handlePickValueDefault();
						setTimeout(() => {
							this.loading = false
						}, 200)
					}
				});
			},
			handlePickValueDefault() {
				console.log(this.defaultValue);
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$refs.address.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
			},
			changeRegion(e) {
				if (this.loading) return;
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.address.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.address.setIndexs(indexs,true)
				}
			},
			openaddress() {
				this.$refs.address.open();
				this.handlePickValueDefault()
			},
			addressconfirm(e) {
				this.address.province_code = e.value[0].id;
				this.address.province = e.value[0].name;
				this.address.city_code = e.value[1].id;
				this.address.city = e.value[1].name;
				this.address.area_code = e.value[2].id;
				this.address.area = e.value[2].name;
				that.defaultValue[0] =that.address.province_code;
				that.defaultValue[1] =that.address.city_code;
				that.defaultValue[2] =that.address.area_code;
				that.addressTxt = that.address.province+'/'+that.address.city+"/"+that.address.area;
			},
			openDate(){
				this.$refs.calendars.open();
			},
			confirmDate(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
